// themeFn接收多个参数
.themeFn(@themeColor, @themeColorHover, @themeColorActive, @themeColorDisable, @themeDialogColor) {
    // themeFn内部只书写与颜色相关的样式
    // 推荐使用 !important
    h3 {
        color: @themeColor !important;
    }

    // 网站头部主题样式修改
    .header {
        background-color: @themeColorDisable !important;
        & .el-menu, .el-menu-item, .el-input__wrapper {
            background-color: @themeColorDisable !important;
            color: @themeColor !important;
        }
        & .is-active {
            color: #409EFF!important;
        }
        & .login {
            color: @themeColor !important;
            & a {
                color: @themeColor !important;
            }
        }
        & h2 a {
            color: #ffffff!important;
        }
        & .notice, .message {
            .svg-icon, span {
                color: #ffffff!important;
            }
        }
    }

    // 轮播图主题样式修改
    .banner {
        & .swiper-wrapper {
            background-color: @themeColorDisable !important;
        }
    }

    // 博客推荐组件模块主题样式修改
    .recommend-box {
        background-color: @themeColorDisable !important;
        & li {
            border: 1px solid #666!important;
        }
    }

    // 博客列表组件模块主题样式修改
    .blog-list {
        & .blog-item {
            background-color: @themeColorDisable !important;
            & .blog-describe {
                color: @themeColor !important;
            }
        }
        & .el-button {
            background-color: @themeColorDisable !important;
            border-color: @themeColorDisable !important;
            color: @themeColor !important;
        }
        & a, 
        .blog_describe, 
        .time, 
        .item-meta-view,
        .item-meta-comment,
        .item-meta-collection {
            color: @themeColor !important;
        }
    }

    // 网站博主介绍组件模块主题样式修改
    .widget_post_author {
        & label {
            color: @themeColor !important;
        }
        & .social-media {
            background-color: @themeColorDisable !important;
        }
        & .author_count {
            background-color: @themeColorDisable !important;
            border-top: 2px #666 solid!important;
            & ul {
                background-color: @themeColorDisable !important;
                border-top: 2px #666 solid!important;
            }
            & li {
                border-right: 1px #666 solid!important;
                & strong {
                    color: @themeColor !important;
                }
            }
            & li:last-child {
                border-right: 0!important;
            }
        }
    }

    // 侧边栏组件模块主题样式修改
    .sideTab {
        background-color: @themeColorDisable !important;
        & .sideTab-title {
            color: @themeColor !important;
            border-bottom: 1px solid #666!important;
        }
        & .comment-box {
            & .comment-input {
                border: 1px solid #666!important;
                background-color: @themeColorDisable !important;
            }
            & .app {
                background-color: @themeColorDisable !important;
                border-radius: 0 0 5px 5px;
            }
        }
        & .comment-textarea {
            background-color: @themeColorDisable !important;
            color: @themeColor !important;
        }
        & .emoji-icon {
            color: @themeColor !important;
        }
        & .info {
            span, label {
                color: @themeColor !important;
            }
        }
        & .links_ul {
            & a {
                border: 1px solid #666!important;
                background-color: @themeColorDisable !important;
            }
        }
        & a, h2, h3, p, .time, .content-text, .bz_about {
            color: @themeColor !important;
        }
        & .content, .emoji-vue-textarea {
            color: @themeColor !important;
            background-color: @themeColorDisable !important;
        }
        & .emoji-wysiwyg-editor {
            color: @themeColor !important;
            border: 1px solid #666!important;
        }
        & .reply {
            color: #bbb!important;
        }
        & .copynotice {
            background-color: @themeColorDisable !important;
            & .text span {
                color: @themeColor !important;
            }
            & .prompt {
                color: red !important;
            }
        }
        & .newslist li:hover {
            background-color: @themeColorHover!important;
        }
        & .bz_about {
            color: @themeColor !important;
        }
    }

    // 网站主体模块主题样式修改
    .main {
        & .leave_position {
            color: @themeColor !important;
            & a, .svg-icon {
                color: @themeColor !important;
            }
        }
        & .panel-btn {
            background-color: @themeColorDisable !important;
            & .common-icon:hover {
                color: @themeColor !important;
            }
        }
        & .panel-btn.count:after {
            background-color: #666 !important;
        }
        & .ui.segment {
            background-color: @themeColorDisable !important;
        }
        & .menu, .content-body {
            background-color: @themeColorDisable !important;
        }
        & .el-input__wrapper {
            background-color: @themeColorDisable !important;
            color: @themeColor !important;
        }
        // 个人基本资料主题样式修改
        & .data-ul {
            background-color: @themeColorDisable !important;
            & .data-li {
                border-bottom: 1px solid #666;
                & .accout-body-l, .content-show-l, .content-show-r, .card-info-years, a {
                    color: @themeColor !important;
                }
                & .card {
                    & li {
                        background-color: @themeColorHover !important;
                        color: @themeColor !important;
                        border: 1px solid #666;
                    }
                    & li:hover {
                        box-shadow: 1px 3px 9px #666;
                    }
                }
                & .bind_api {
                    background-color: @themeColorDisable !important;
                    border: 1px solid #666;
                    & .title {
                        color: @themeColor !important;
                    }
                }
            }
            & .data-li:last-child {
                border-bottom: 0;
            }
        }
        & .account-box {
            & .account-header {
                color: @themeColor !important;
            }
            & .accout-body {
                background-color: @themeColorHover !important;
                & .accout-body-l {
                    color: @themeColor !important;
                }
            }
        }
        & .el-input__inner {
            background-color: @themeColorDisable!important;
            border-color: @themeColorHover!important;
        }
        & .nodata {
            background-color: @themeColorDisable!important;
        }
    }

    // 固定导航栏主题样式修改
    .backtop {
        & .bt-box {
            background-color: @themeColorDisable !important;
        }
    }
    
    // 个人主页组件模块主题样式修改
    .author-tab {
        background-color: @themeColorDisable !important;
        border: 0;
        & a, .item, .time, .blog-describe, .el-tabs__item, .comment-content {
            color: @themeColor !important;
        }
        & .el-tabs__nav-wrap::after {
            background-color: @themeColorHover!important;
        }
        & .article-data li:hover, .user-data li:hover, .comment-data li:hover {
            box-shadow: 1px 3px 9px #666;
        }
    }

    // 登录、注册框组件模块主题样式修改
    .main-body {
        background-color: @themeColorDisable !important;
        & .dialog {
            color: @themeColor !important;
            box-shadow: 0;
            & .dialog-body {
                & .title-box {
                    color: @themeColor !important;
                    border-bottom: 1px solid #666;
                }
                & .separated div {
                    color: @themeColor !important;
                }
                background-color: @themeColorDisable !important;
                color: @themeColor !important;
            }
            & .el-input__inner {
                background-color: @themeColorDisable !important;
                color: @themeColor !important;
            }
        }
    }

    .emoji-container {
        background-color: @themeColorDisable !important;
        border: 1px solid #666!important;
        & .btnBox {
            border-top: 1px solid #666!important;
        }
    }

    // 网站底部主题样式修改
    footer {
        background-color: @themeColorDisable !important;
    }

    // 用户卡片组件模块主题样式修改
    .user-card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important; /* 阴影效果 */
    }
    .user-card, .user-cover {
        background-color: @themeColorDisable!important;
        & .user-panel {
            & .user-panel-info {
                & p, span, a {
                    color: @themeColor !important;
                }
                & a:hover {
                    color: #409EFF !important;
                }
            }
        }
        & a {
            color: @themeColor !important;
        }
    }

    .login_panel_box {
        background-color: @themeColorDisable!important;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important; /* 阴影效果 */
        & .login_box_top {
            & .main_right {
                & p, span, a {
                    color: @themeColor !important;
                }
                & a:hover {
                    color: #409EFF !important;
                }
            }
            & .main_on {
                & .user_name {
                    & a {
                        color: @themeColor !important;
                    }
                    & a:hover {
                        color: #409EFF !important;
                    }
                }
            }
        }
        & .login_box_center {
            & .number_board {
                & .number_board_item {
                    & a {
                        & .number_board_value, .number_board_name {
                            color: @themeColor !important;
                        }
                    }
                }
            }
        }
        & .userCenter:hover, .accountSetting:hover, .logOut:hover {
            border-radius: 4px;
            box-shadow: 1px 3px 9px #666;
            transition: .6s;
        }
    }

    .el-dialog {
        background-color: @themeColorDisable!important;
        & .el-dialog__header {
            & .el-dialog__title {
                color: @themeColor !important;
            }
            & span, a {
                color: @themeColor !important;
            }
        }
        & .dialog-header {
            color: @themeColor !important;
        }
        & .user-info-header {
            border-bottom: 1px solid #666;
        }
        & .el-dialog__body {
            color: @themeColor !important;
            & .el-input__wrapper, .el-divider__text {
                background-color: @themeColorDisable !important;
                color: @themeColor !important;
            }
            & .el-form-item__label, a {
                color: @themeColor !important;
            }
        }
    }

    .el-popper {
        background-color: @themeColorDisable!important;
        border: 0!important;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important; /* 阴影效果 */
        // 用户聊天组件模块主题样式修改
        & .chat_box {
            background-color: @themeColorDisable!important;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); /* 阴影效果 */
            .box_left {
                .chat-panel {
                    span {
                        color: @themeColor !important;
                    }
                    .chat-item.active, .chat-item:hover {
                        background: @themeColorHover!important;
                    }
                }
                border-right: 1px solid #666!important;
            }
            .box_right {
                .chat-header {
                    span {
                        color: @themeColor !important;
                    }
                    border-bottom: 1px solid #666!important;
                }
                .message-list {
                    .right {
                        .text {
                            background: @themeColorHover!important;
                        }
                        .text:before {
                            border-left-color: @themeColorHover!important;
                        }
                    }
                    .left {
                        .text {
                            background: @themeColorHover!important;
                            color: @themeColor !important;
                        }
                        .text:before {
                            border-right-color: @themeColorHover!important;
                        }
                    }
                }
                .chat-content-input {
                    .m-input {
                        color: @themeColor!important;
                    }
                    .app {
                        .emoji-icon {
                            color: @themeColor!important;
                        }
                        .action {
                            color: @themeColor!important;
                        }
                    }
                    background: @themeColorHover!important;
                    color: @themeColor!important;
                }
            }
        }
        // 用户通知组件模块主题样式修改
        .notice_box {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); /* 阴影效果 */
            .header {
                .text {
                    color: @themeColor !important;
                }
                .el-dropdown-link {
                    color: @themeColor !important;
                }
                background-color: @themeColorDisable!important;
            }
            .notice-list {
                li:hover { 
                    background-color: @themeColorHover!important;
                }
            }
            .comment-content, .fans-content {
                .comment-box, .fans-box, a {
                    color: @themeColor !important;
                }
            }
        }
    }

}